<template>
  <div class="luckyButtons">
    <a-button type="primary" @click="showList = true">
      编辑背景
    </a-button>
    <a-modal :visible="showList" title="编辑背景" @cancel="showList = false" :width="1200" @ok="showList = false" okText="确定" cancelText="取消">
      <div class="list acea-row row-middle" v-for="(item,index) in list" :key="index" >
        {{'背景'+parseInt(index+1)}}
        <div class="item acea-row row-middle">
          按钮半径: <a-input v-model="item.radius" style="width: 120px;margin-left:10px;" />
        </div>
        <div class="item acea-row row-middle">
          显示指针: <a-switch v-model="item.pointer" />
        </div>
        <div class="item acea-row row-middle">
          背景颜色：<a-input v-model="item.background" style="width: 120px;margin-left:10px;" />
        </div>
        <div class="item acea-row row-middle">
          背景图：<a-upload
                    action="/api/uploadPic"
                    :showUploadList="false"
                    list-type="picture-card"
                    name="pic"
                    @change="(info) => uploadChange(info,item)"
                  >
                    <img class="upload-pic" v-if="item.imgs.length>0" :src="item.imgs[0].src" alt="avatar" />
                    <div v-else>
                      <a-icon type="plus" />
                      <div class="ant-upload-text">上传</div>
                    </div>
                  </a-upload>
        </div>
        <div class="item acea-row row-middle" v-if="item.imgs.length>0">
          图片宽度：<a-input v-model="item.imgs[0].width" style="width: 120px;margin-left:10px;" />
        </div>
        <div class="item acea-row row-middle" v-if="item.imgs.length>0">
          图片高度：<a-input v-model="item.imgs[0].height" style="width: 120px;margin-left:10px;" />
        </div>
        <div class="item acea-row row-middle" v-if="item.imgs.length>0">
          圆心距离：<a-input v-model="item.imgs[0].top" style="width: 120px;margin-left:10px;" />
        </div>
        <a-icon :type="index==0?'plus-circle':'minus-circle'" class="list-icon" @click="handle(index)" />
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name:"luckyButtons",
  props:{
    list:{
      type:Array,
      default:[]
    }
  },
  data() {
    return {
      showList:false,
    }
  },
  methods: {
    handle(idx){
      let list = JSON.parse(JSON.stringify(this.list))
      if(idx == 0){
        let obj = { 
          radius: '50px',
          pointer:false,
          background: '',
          imgs:[]
        }
        list.push(obj)
      }else{
        list.splice(idx,1)
      }
      this.$emit("update:list",list)
    },
    uploadChange(info,item){
      console.log("uploadChange",info)
      if (info.file.status === 'uploading') {
        return;
      }
      if (info.file.status === 'done') {
        for(let i of info.fileList){
          i.src = i.response
          i.width = "100%"
          i.height = "100%"
          i.top = "0"
        }
        item.imgs = info.fileList
      }
    }
  },
}
</script>

<style scoped>
  .list{
    margin-bottom: 20px;
  }
  .item{
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-left: 20px;
  }
  .list-icon{
    font-size:18px;
    margin-left: 20px;
    cursor: pointer;
  }
  .upload-pic{
    width: 88px;
    height: 88px;
  }
</style>